<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style type="">
		.tab{width:50%; height: 30px; float: left;padding: 10px; border:10px solid #ff00aa; box-sizing: border-box;}
		.tab:nth-child(1){ background: #c3a781; border-radius:3 0px 0px 3px;}
		.tab:nth-child(2){ background: #934781; border-radius:0 3px 3px 0px;}

		
	</style>
</head>
<body>
 <style>
    .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:#bbb;text-align: center;} 
    .main{} 
    .content{overflow: hidden;background-color:#a4e88c;} 
    .left{width: 100px;background-color: #E79F6D;} 
    .right{width: 100px;background-color: #7BD;} 
    .left,.right,.content{min-height: 200px;_height:200px;} /*伸缩盒布局*/ 
    .flex-container{display: flex;} 
    .content{flex:1;} 
    .left{order:-1;}
</style>
<div class="header">
    页头100px
</div>
<div class="main flex-container">
    <div class="content">
        中间自适应
    </div>
    <div class="left">
        左边宽100px左边宽100px左边宽100px
    </div>
    <div class="right">
        右边宽150px
    </div>
</div>
<div class="footer">
    页脚100px
</div>
 
</body>
</html>